<template>
  <div>
    <div class="item-box">
      <div class="lt flex">
        <slot name="left" />
      </div>
      <div class="rt flex">
        <slot name="right" />
        <div class="handle-box flex" style="margin-left: 40px;">
          <i :class="type=='line'?'iconfont icon-zhexiantu active':'iconfont icon-zhexiantu'" @click="createCharts('line')" />
		  <i
		    :class="type=='lineArea'?'iconfont icon-jurassic_broken-line active':'iconfont icon-jurassic_broken-line'"
		    @click="createCharts('lineArea')"
		  />
          <i
            :class="type=='bar'?'iconfont icon-zhuzhuangtu active':'iconfont icon-zhuzhuangtu'"
            style="font-size: 26px;"
            @click="createCharts('bar')"
          />
         
          <i class="iconfont iconfont icon-xiazai" @click="downloadImg" />
        </div>
      </div>
    </div>
    <div :id="idName" class="chart-table" :style="{height}" />
  </div>
</template>

<script>
import {
  echartsOptions
} from '@/settings.js'
import {
  colorList
} from '@/settings.js'

const grid = {
  top: '40px',
  left: '40px',
  right: '40px',
  bottom: '20px',
  containLabel: true
}

const yAxisItem = {
  type: 'value',
  min: 0,
  axisLine: {
    show: false
  },
  boundaryGap: false,
  axisTick: {
    show: false
  },
  nameTextStyle: {
    color: '#666',
    padding: [0, 10, 5, 0],
    fontSize: 16
  },
  axisLabel: {
    color: '#666',
    fontSize: 16

  }
}
import {
  mapGetters
} from 'vuex'
export default {
  props: {
    daily: {
      default: 126560,
      type: Number
    },
    idName: {
      default: 'chart-table',
      type: String
    },
    height: {
      default: '450px',
      type: String
    },
    xData: { // x轴的数据
      // default: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      type: Object
    },
    seriesData: {
      default: ['1月', '2月'], // y轴的数据
      type: Object
    }

  },

  computed: {
    ...mapGetters([
      'sidebar'
    ]),
    opened() {
      return this.sidebar.opened
    }
  },
  watch: {
    opened() {
      if (this.cardChart) {

        const that = this
        this.$nextTick(() => {
          setTimeout(() => {
            that.cardChart.resize()
          }, 200)
        })
      }
    },
    xData() {
      this.createCharts()
    },
    seriesData() {
      this.createCharts()
    }
  },
  data() {
    return {
      echartsOptions: echartsOptions,
      cardChart: undefined,
      type: 'line',
      option: {
        grid,
        tooltip: {
          trigger: 'axis'
        },

        xAxis: {
          type: 'category',
          data: undefined,
          axisTick: {
            // show: false,
            alignWithLabel: true
          },
          axisLine: {
            lineStyle: {
              color: '#c3c3c3'
            }

          },
          axisLabel: {
            color: '#666',
            margin: 18,
            fontSize: 14
          }

        },
        yAxis: [],
        series: []
      }
    }
  },
  mounted() {

  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {})
  },
  methods: {
    // 创建图表
    createCharts(type) {
      if (type) {
        this.type = type
      }

      // 完善数据
      const options = JSON.parse(JSON.stringify(this.option))
      const that = this
      options.xAxis.data = that.xData
      this.seriesData.forEach((item, index) => {
        // 循环出y轴
        options.yAxis.push({ ...yAxisItem,
          name: item.name,
          axisLabel: item.axisLabel
        })

        const seriesItem = {
          name: item.name,
          data: item.data,
          color: colorList[index],
          type
        }
        // 循环出series数据
        const obj = that.setSeries(seriesItem)
        options.series.push(obj)
      })

      // 找到盒子
      const idname = this.idName
      this.cardChart = this.$echarts.init(document.getElementById(idname))
      setTimeout(() => {
        that.cardChart.resize()
        that.cardChart.setOption(options, true)
      }, 1)

      window.addEventListener('resize', () => {
        that.cardChart.resize()
      })
    },

    // 循环出series设置的函数
    setSeries(data) {
      let obj = {
        name: data.name, // '下载'
        type: data.type === 'bar' ? 'bar' : 'line',
        data: data.data,
        boundaryGap: false,
        splitLine: {
          'show': false
        },
        lineStyle: {
          color: data.color || 'rgba(84, 138, 249, 1)'
        }, // 线条的样式
        itemStyle: {
          color: data.color || 'rgba(84, 138, 249, 1)'
          // opacity: 0 // 为0不会绘制图形拐点消失
        }
      }

      if (data.type == 'lineArea') {
        obj = {
          ...obj,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: data.color || 'rgba(84, 138, 249, 1)'
            }, {
              offset: 1,
              color: 'rgba(77, 119, 255)'
            }])
          },
          emphasis: {
            focus: 'series'
          }
        }
      }
      return obj
    },

    // 下载图表
    downloadImg() {
      const picInfo = this.cardChart.getDataURL({
        type: 'png',
        pixelRatio: 1.5, // 放大两倍下载，之后压缩到同等大小展示。解决生成图片在移动端模糊问题
        backgroundColor: '#fff'
      })
      const elink = document.createElement('a')
      elink.download = '3YData图表'

      elink.style.display = 'none'
      elink.href = picInfo
      document.body.appendChild(elink)
      elink.click()
      URL.revokeObjectURL(elink.href) // 释放URL 对象
    }

  }
}
</script>

<style lang="scss" scoped="true">
  .chart-table {

    width: 100%;
    overflow: hidden;

  }

  .item-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    padding-bottom: 24px;
  }

  .handle-box {
    justify-content: flex-end;

    i {
      font-size: 24px;
      color: rgba(0, 0, 0, 0.45);
      cursor: pointer;
      margin-right: 12px;

      &.active,
      &:hover {
        color: rgba(49, 147, 252, 1)
      }
    }
  }
</style>
